<template>
    <div>
        <van-cell-group>
            <van-row>
                <van-col span="20">
                    <van-field v-model="form.name" :readonly="status==3?true:false" label="企业名称：" icon=""
                               placeholder="请输入企业名称">
                    </van-field>
                </van-col>
                <van-col span="4" v-if="status == 3">
                    <van-tag type="danger">已实名</van-tag>
                </van-col>
                <van-col span="4" else>
                    <van-tag type="danger">未实名</van-tag>
                </van-col>
            </van-row>
            <van-field v-model="form.idCard" :readonly="status==3?true:false" label="企业编码："
                       placeholder="请输入营业执照上企业信用代码">
                <van-icon v-if="status == 3" slot="icon" name="edit" size="small">不可编辑</van-icon>
            </van-field>
            <van-field v-model="form.contactsMan" label="联系人姓名：" placeholder="请输入企业指定联系人姓名"/>
            <van-field v-model="form.contactsPhone" label="联系人手机：" placeholder="请输入联系人手机号码"/>
            <van-field v-model="position" label="企业所在地：" readonly placeholder="选择省/市/区"
                       @click="openPopup(provinces)"></van-field>
            <van-row>
                <van-col span="7">
                    <van-cell title="企业执照："/>
                </van-col>
                <van-col span="17">
                    <van-uploader :after-read="onRead" :disabled="form.isRealName == 0?false:true"
                                  style="width:44px;height:44px;text-align: center;line-height: 44px;">
                        <van-icon name="photograph" v-if="!(form.licenseImg.length>0)"/>
                        <img style="width:44px;height:44px;" src="" ref="goodsImg" v-else/>
                    </van-uploader>
                </van-col>
            </van-row>
            <van-popup v-model="showPopup" position="bottom">
                <van-picker ref="provinces" :show-toolbar="true" @confirm="confirm" @cancel="cancel"
                            :columns="provinces"
                            @change="onProvinceChange"/>
            </van-popup>
            <h1></h1>
            <van-button type="warning" size="large" @click="save">{{saveName}}
                <van-icon name="edit"/>
            </van-button>
        </van-cell-group>
    </div>
</template>
<script>
    import {
        CellGroup,
        Field,
        RadioGroup,
        Radio,
        Cell,
        Button,
        Picker,
        Checkbox,
        CheckboxGroup,
        Toast,
        Popup,
        Icon,
        Row,
        Col,
        Tag,
        Uploader,
    } from 'vant';
    import http from '../../common/http';

    export default {
        components: {
            [CellGroup.name]: CellGroup,
            [Field.name]: Field,
            [RadioGroup.name]: RadioGroup,
            [Radio.name]: Radio,
            [Cell.name]: Cell,
            [Button.name]: Button,
            [Picker.name]: Picker,
            [Checkbox.name]: Checkbox,
            [CheckboxGroup.name]: CheckboxGroup,
            [Toast.name]: Toast,
            [Tag.name]: Tag,
            [Icon.name]: Icon,
            [Row.name]: Row,
            [Col.name]: Col,
            [Uploader.name]: Uploader,
            [Popup.name]: Popup
        },
        data() {
            return {
                form: {
                    name: '',
                    contactsMan: '',
                    idCard: '',
                    contactsPhone: '',
                    province: '',
                    city: '',
                    area: '',
                    isRealName:0,
                    licenseImg: '',
                },
                provincesData: null,
                provinces: [
                    {
                        values: [],
                        className: 'column1'
                    },
                    {
                        values: [],
                        className: 'column2',
                        defaultIndex: 2
                    },
                    {
                        values: [],
                        className: 'column3',
                        defaultIndex: 2
                    }
                ],
                showPopup: false,
                isFirst: true,
                position: '',
                company: '',
                status: 1,      //1表示还没有注册过公司  2表示已经注册过公司但是还没有实名认证  3表示注册过公司且实名认证了
                canEdit: true,
                saveName: '提交保存'
            }
        },
        created() {
            this.$parent.title = '我的用工企业信息';
            this.getProvince();
        },
        methods: {
            //通过获取是否有公司的ID，判断有无注册过公司
            getProvince() { //省市区
                console.log('走了这里', this.$refs)
                http.getUserJsonData(`/user/company/get`, {}, (data) => {
                    console.log(data);
                    //表明已经注册过公司了
                    if (data.company && data.company.companyId) {
                        this.status = 2;
                        this.canEdit = false;
                        this.saveName = '编辑保存';
                    } else {
                        this.status = 1;
                        this.canEdit = true;
                    }
                    this.provincesData = data.provinces;
                    if (data.company) {
                        Object.assign(this.form, data.company);
                        this.company = data.company;
                        this.renderPosition();
                    }
                    console.log('status状态', this.status)
                });
            },
            onProvinceChange(picker, values, index) {
                if (index == 0) {
                    picker.setColumnValues(1, Object.keys(this.provincesData[values[0]]));
                    picker.setColumnValues(2, this.provincesData[values[0]][picker.getColumnValue(1)]);
                }
                if (index == 1) {
                    picker.setColumnValues(2, this.provincesData[values[0]][values[1]]);
                }
            },
            save() {
                let params = {};
                Object.assign(params, this.form);
                console.log(params);
                Toast('信息保存中。。。');
                http.postUserJsonData(`/user/company/save`, params, () => {
                    Toast('保存成功');
                });
            },
            onSave() {
            },
            openPopup(provinces) {
                if (this.status == 3) return;
                this.showPopup = true;
                if (!this.isFirst) return;
                this.isFirst = false;
                setTimeout(() => {
                    if (!this.company) {
                        this.$refs.provinces.setColumnValues(0, Object.keys(this.provincesData));
                        this.$refs.provinces.setColumnValue(0, '湖南');
                        this.$refs.provinces.setColumnValues(1, Object.keys(this.provincesData['湖南']));
                        this.$refs.provinces.setColumnValue(1, '湘潭');
                        this.$refs.provinces.setColumnValues(2, this.provincesData['湖南']['湘潭']);
                        this.$refs.provinces.setColumnValue(2, '湘潭县');
                    } else {
                        this.$refs.provinces.setColumnValues(0, Object.keys(this.provincesData));
                        this.$refs.provinces.setColumnValue(0, this.company.province);
                        this.$refs.provinces.setColumnValues(1, Object.keys(this.provincesData[this.company.province]));
                        this.$refs.provinces.setColumnValue(1, this.company.city);
                        this.$refs.provinces.setColumnValues(2, this.provincesData[this.company.province][this.company.city]);
                        this.$refs.provinces.setColumnValue(2, this.company.area);
                    }
                }, 100)

            },
            confirm(data) {
                this.showPopup = false;
                this.form.province = data[0];
                this.form.city = data[1];
                this.form.area = data[2];
                this.renderPosition();
            },
            renderPosition() {
                if (!this.form.province || !this.form.city || !this.form.area) return;
                if (Object.keys(this.provincesData[this.form.province]).length == 1) {
                    this.position = this.form.province + '/' + this.form.area;
                } else {
                    this.position = this.form.province + '/' + this.form.city + '/' + this.form.area;
                }
            },
            cancel() {
                this.showPopup = false;
            },
            onRead(file) {
                console.log(file);
                this.form.licenseImg = file.content;
                setTimeout(()=>{
                    this.$refs.goodsImg.src = file.content;
                },10)
            },
        }
    }
</script>
